{
  /* <route>
  meta:
    title: t('ScrollComponent.Title')
    permissionCode: view:components_scroll
    head:
      title: t('ScrollComponent.Head.Title')
</route> */
}
import { defineComponent, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import Scroll from '@convue-lib/scroll';

export default defineComponent({
  setup() {
    const { t } = useI18n();
    const formState = reactive({
      value1: '',
      value2: '',
    });

    return () => (
      <>
        <page-header title={t('ScrollComponent.Title')}>
          <span>
            {t('ScrollComponent.PageDescription')}
            <a href="https://ziping-li.github.io/convue-lib/#/scroll" target="_blank">
              https://ziping-li.github.io/convue-lib/#/scroll
            </a>
          </span>
        </page-header>

        <div class="p-5">
          <a-card bordered={false}>
            <a-row gutter={[20, 20]}>
              <a-col md={12} sm={24} xs={24}>
                <a-card title={t('ScrollComponent.Basic')} bordered={false}>
                  <div style="width: 300px;height: 100px;border: 1px solid #ccc;">
                    <Scroll>
                      <p style="width: 600px;">
                        《风》又称《国风》，一共有15组、按地区划分，包括“周南”、“召南”、“邶风”、“鄘风”、“卫风”、“王风”、“郑风”、“桧风”、“齐风”、“魏风”、“唐风”、“秦风”、“豳[20]风”、“陈风”和“曹风”，共160篇，又被称为“十五国风”。《国风》被普遍视为《诗经》中的文学精华部分，后人将其与屈原的《离骚》并称为“风骚”。从风格上讲，《国风》带有浓烈的地方色彩；从内容上讲，《国风》大多数是民间诗歌，作者除少数是个别贵族外，大多是民间歌手。
                        对于《雅》的认识有各种不同的观点。一种观点认为是指周朝直接统治地区的音乐，“雅”有“正”的意思，把这种音乐看作“正声”，意在表明和其他地方音乐的区别。也有人说“雅”与“夏”相通，夏是周朝直接统治地区的称呼。还有观点认为，《雅》是指人人能懂的典雅音乐。《雅》共105篇，分为《大雅》31篇和《小雅》74篇。《小雅》为宴请宾客之音乐。《大雅》则是国君接受臣下朝拜，陈述劝戒的音乐。多数是朝廷官吏及公卿大夫的作品，有一小部分是民间诗歌。其内容几乎都是关于政治方面的，有赞颂好人好政的，有讽刺弊政的。只有几首表达个人感情的诗。但是没有情诗。“雅”在此可以指贵族官吏诗歌。
                        《颂》是贵族在家庙中祭祀鬼神、赞美统治者功德的乐曲，在演奏时要配以舞蹈，也可以专指宗庙祭祀用诗歌，又分为《周颂》、《鲁颂》和《商颂》，共40篇。其中《周颂》31篇，一般认为其中大部分都是西周前期时的作品、多作于周昭王、周穆王以前；《鲁颂》4篇，认为可能是鲁僖公时的作品；《商颂》5篇，自古以来一直相传是春秋时期宋国大夫正考父所作，不过，目前学界则倾向于认为是商朝所留下的祭祖诗歌。
                      </p>
                    </Scroll>
                  </div>
                </a-card>
              </a-col>
              <a-col md={12} sm={24} xs={24}>
                <a-card title={t('ScrollComponent.Direction')} bordered={false}>
                  <div style="width: 300px;height: 100px;border: 1px solid #ccc;">
                    <Scroll direction="y">
                      <p style="width: 600px;">
                        《风》又称《国风》，一共有15组、按地区划分，包括“周南”、“召南”、“邶风”、“鄘风”、“卫风”、“王风”、“郑风”、“桧风”、“齐风”、“魏风”、“唐风”、“秦风”、“豳[20]风”、“陈风”和“曹风”，共160篇，又被称为“十五国风”。《国风》被普遍视为《诗经》中的文学精华部分，后人将其与屈原的《离骚》并称为“风骚”。从风格上讲，《国风》带有浓烈的地方色彩；从内容上讲，《国风》大多数是民间诗歌，作者除少数是个别贵族外，大多是民间歌手。
                        对于《雅》的认识有各种不同的观点。一种观点认为是指周朝直接统治地区的音乐，“雅”有“正”的意思，把这种音乐看作“正声”，意在表明和其他地方音乐的区别。也有人说“雅”与“夏”相通，夏是周朝直接统治地区的称呼。还有观点认为，《雅》是指人人能懂的典雅音乐。《雅》共105篇，分为《大雅》31篇和《小雅》74篇。《小雅》为宴请宾客之音乐。《大雅》则是国君接受臣下朝拜，陈述劝戒的音乐。多数是朝廷官吏及公卿大夫的作品，有一小部分是民间诗歌。其内容几乎都是关于政治方面的，有赞颂好人好政的，有讽刺弊政的。只有几首表达个人感情的诗。但是没有情诗。“雅”在此可以指贵族官吏诗歌。
                        《颂》是贵族在家庙中祭祀鬼神、赞美统治者功德的乐曲，在演奏时要配以舞蹈，也可以专指宗庙祭祀用诗歌，又分为《周颂》、《鲁颂》和《商颂》，共40篇。其中《周颂》31篇，一般认为其中大部分都是西周前期时的作品、多作于周昭王、周穆王以前；《鲁颂》4篇，认为可能是鲁僖公时的作品；《商颂》5篇，自古以来一直相传是春秋时期宋国大夫正考父所作，不过，目前学界则倾向于认为是商朝所留下的祭祖诗歌。
                      </p>
                    </Scroll>
                  </div>
                </a-card>
              </a-col>
              <a-col md={12} sm={24} xs={24}>
                <a-card title={t('ScrollComponent.Bar')} bordered={false}>
                  <div style="width: 300px;height: 100px;border: 1px solid #ccc;">
                    <Scroll trigger="always">
                      <p style="width: 600px;">
                        《风》又称《国风》，一共有15组、按地区划分，包括“周南”、“召南”、“邶风”、“鄘风”、“卫风”、“王风”、“郑风”、“桧风”、“齐风”、“魏风”、“唐风”、“秦风”、“豳[20]风”、“陈风”和“曹风”，共160篇，又被称为“十五国风”。《国风》被普遍视为《诗经》中的文学精华部分，后人将其与屈原的《离骚》并称为“风骚”。从风格上讲，《国风》带有浓烈的地方色彩；从内容上讲，《国风》大多数是民间诗歌，作者除少数是个别贵族外，大多是民间歌手。
                        对于《雅》的认识有各种不同的观点。一种观点认为是指周朝直接统治地区的音乐，“雅”有“正”的意思，把这种音乐看作“正声”，意在表明和其他地方音乐的区别。也有人说“雅”与“夏”相通，夏是周朝直接统治地区的称呼。还有观点认为，《雅》是指人人能懂的典雅音乐。《雅》共105篇，分为《大雅》31篇和《小雅》74篇。《小雅》为宴请宾客之音乐。《大雅》则是国君接受臣下朝拜，陈述劝戒的音乐。多数是朝廷官吏及公卿大夫的作品，有一小部分是民间诗歌。其内容几乎都是关于政治方面的，有赞颂好人好政的，有讽刺弊政的。只有几首表达个人感情的诗。但是没有情诗。“雅”在此可以指贵族官吏诗歌。
                        《颂》是贵族在家庙中祭祀鬼神、赞美统治者功德的乐曲，在演奏时要配以舞蹈，也可以专指宗庙祭祀用诗歌，又分为《周颂》、《鲁颂》和《商颂》，共40篇。其中《周颂》31篇，一般认为其中大部分都是西周前期时的作品、多作于周昭王、周穆王以前；《鲁颂》4篇，认为可能是鲁僖公时的作品；《商颂》5篇，自古以来一直相传是春秋时期宋国大夫正考父所作，不过，目前学界则倾向于认为是商朝所留下的祭祖诗歌。
                      </p>
                    </Scroll>
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </a-card>
        </div>
      </>
    );
  },
});
